import React from 'react'
import { Link, Table, TitleBar } from '../../ui-components'
import { connect } from 'react-redux'
import moment from 'moment'
import util from '../../util'

export default
@connect(({ transfer }) => ({ transfer }))
class Leave extends React.Component {

  pageSize=1
  pageNumber=30

  state = {
    loading: true
  }

  fetchTransforms() {
    const pageNumber = this.props.location.query.pageNumber || this.pageNumber
    this.setState({
      loading: true
    })
    this.props.fetchTransformList({
      pageNumber,
      pageSize: this.pageSize
    }, () => {
      this.setState({
        loading: false
      })
    })
  }

  handlePageChage(_pageNumber) {
    const { pageNumber, ...others } = this.props.location.query
    this.props.router.push(`/reorg/transfer?pageNumber=${_pageNumber}&${util.body(others)}`)
  }

  componentDidMount() {
    this.fetchTransforms()
  }

  render() {
    const { list } = this.props.transfer
    const { totalNumber, jobTransferResponseVOs } = list
    const tableConfig = {
      pagin: typeof totalNumber === 'number' && {
        pageSize: this.pageSize,
        pageNumber: this.props.location.query.pageNumber || this.pageNumber,
        totalNumber,
        onChange: ::this.handlePageChage,
        fetch: ::this.fetchTransforms
      },
      data: jobTransferResponseVOs,
      model: {
        fullName: '调岗对象',
        jobTitle: '职位',
        createdTime: '发起时间',
        transferDate: '调岗时间',
        transferType: '类型',
        others: '操作'
      },
      config: {},
      map: {
        fullName: (_, item) => item.userSimpleUserProfileVO.fullName,
        jobTitle: (_, item) => item.userSimpleUserProfileVO.jobTitle,
        createdTime: v => moment(+v).format('YYYY.MM.DD'),
        transferDate: v => moment(+v).format('YYYY.MM.DD'),
        others: () => <Link label="查看"/>
      },
      loading: this.state.loading
    }
    return (
      <div>
        <TitleBar
          label="调岗列表"
        />
        <Table
          {...tableConfig}
        />
      </div>
    )
  }
}
